import React, {Component} from 'react';
import Service from "./Service";
import Lng from "../common/lng";
import {Spin, Form, Input, InputNumber, Select} from "antd";

class EditDishSpecForm extends Component {

    state = {
        spec: {},
        loading: true
    }

    componentDidMount() {
        const self = this;
        Service.getDishSpecs(this.props.id, (data) => {
            self.setState({
                spec: data.data,
                loading: false
            });
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        const {spec, loading} = this.state;
        const self = this;
        return (
            <Spin spinning={loading}>
                <Form>
                    <Form.Item className={"hide"}>
                        {getFieldDecorator('id', {
                            initialValue: spec.id
                        })(
                            <Input className={"hide"}/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishSpec.code")}
                    >
                        {getFieldDecorator('code', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.code")})
                            }],
                            initialValue: spec.code
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    {
                        spec["sizeUnit"] != null ?
                            <div>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.length")}
                                >
                                    {getFieldDecorator('length', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.length")})
                                        }],
                                        initialValue: spec["length"]
                                    })(
                                        <InputNumber min={0}/>
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.width")}
                                >
                                    {getFieldDecorator('width', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.width")})
                                        }],
                                        initialValue: spec["width"]
                                    })(
                                        <InputNumber min={0}/>
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.unit")}
                                >
                                    {getFieldDecorator('sizeUnit', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.select", {some: Lng.get("dishSpec.unit")})
                                        }],
                                        initialValue: spec.sizeUnit
                                    })(
                                        <Select>
                                            <Select.Option key={"".uuid()}
                                                           value={"M"}>{Lng.get("dishSpec.M")}</Select.Option>
                                            <Select.Option key={"".uuid()}
                                                           value={"CM"}>{Lng.get("dishSpec.CM")}</Select.Option>
                                            <Select.Option key={"".uuid()}
                                                           value={"MM"}>{Lng.get("dishSpec.MM")}</Select.Option>
                                        </Select>
                                    )}
                                </Form.Item>
                            </div> : spec["volumeUnit"] != null ?
                            <div>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.volume")}
                                >
                                    {getFieldDecorator('volume', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.volume")})
                                        }],
                                        initialValue: spec["volume"]
                                    })(
                                        <InputNumber min={0}/>
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.unit")}
                                >
                                    {getFieldDecorator('volumeUnit', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.select", {some: Lng.get("dishSpec.unit")})
                                        }],
                                        initialValue: spec["volumeUnit"]
                                    })(
                                        <Select>
                                            <Select.Option key={"".uuid()}
                                                           value={"L"}>{Lng.get("dishSpec.L")}</Select.Option>
                                            <Select.Option key={"".uuid()}
                                                           value={"ML"}>{Lng.get("dishSpec.ML")}</Select.Option>
                                        </Select>
                                    )}
                                </Form.Item>
                            </div> : <div>
                                <Form.Item
                                    {...formItemLayout}
                                    label={Lng.get("dishSpec.count")}
                                >
                                    {getFieldDecorator('count', {
                                        rules: [{
                                            required: true,
                                            message: Lng.get("common.placeholder", {some: Lng.get("dishSpec.count")})
                                        }],
                                        initialValue: spec["count"]
                                    })(
                                        <InputNumber min={0}/>
                                    )}
                                </Form.Item>
                            </div>
                    }
                </Form>
            </Spin>
        )
    }
}

const _EditDishSpecForm = Form.create()(EditDishSpecForm);
export default _EditDishSpecForm;
